<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3-04 水平对齐方式</title>
</head>
<body>
  <canvas id="c" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

  <script>
    const context = document.getElementById('c')
    const ctx = context.getContext('2d')

    // 竖向的辅助线（参考线，在画布中间）
    ctx.moveTo(200, 0)
    ctx.lineTo(200, 400)
    ctx.strokeStyle = 'red'
    ctx.stroke()

    ctx.font = '30px Arial'

    // 横坐标开始位对齐
    ctx.textAlign = 'start' // 默认值,
    ctx.fillText('雷猴 start', 200, 40)

    // 横坐标结束位对齐
    ctx.textAlign = 'end' // 结束对齐
    ctx.fillText('雷猴 end', 200, 100)

    // 左对齐
    ctx.textAlign = 'left' // 左对齐
    ctx.fillText('雷猴 left', 200, 160)

    // 右对齐
    ctx.textAlign = 'right' // 右对齐
    ctx.fillText('雷猴 right', 200, 220)

    // 居中对齐
    ctx.textAlign = 'center' // 右对齐
    ctx.fillText('雷猴 center', 200, 280)
  </script>
</body>
</html>